<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3d-立方体</title>
<style>
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}

html,body{
  height:100%;
  background-color: #EEE;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
}

ul{
  list-style-type: none;
}

.bigbox{
  position: relative;
  width:400px;
  height:400px;
}

.box{
  position: absolute;
  width:400px;
  height:400px;

  transform-style:preserve-3d;
}

.box li{
  position: absolute;
  width:100%;
  height:100%;

  border:1px solid #000;

  display: flex;
  justify-content: center;
  align-items: center;
}

.left{
  transform-origin:left;
  transform: translateZ(-200px) rotateY(-90deg);
  background-color: rgba(255,218,185, .5);
}

.right{
  transform-origin:right;
  transform: translateZ(-200px) rotateY(90deg);
  background-color: rgba(0, 197, 205, .5);
}

.top{
  transform-origin:top;
  transform: translateZ(-200px) rotateX(90deg);
  background-color: rgba(238, 99, 99, .5);
}

.bottom{
  transform-origin:bottom;
  transform: translateZ(-200px) rotateX(-90deg);
  background-color: rgba(100, 149, 237, .5);
}


.front{
  transform: translateZ(200px);
  background-color: rgba(209, 95, 238, .5);
}

.back{
  transform: translateZ(-200px);
  background-color: rgba(0, 139, 139, .5);
}

.big{
  transform: rotateX(-45deg) rotateY(-45deg);
  animation: bigRun 5s infinite;
}

.small{
  /* transform: rotateX(0deg)  rotateY(-45deg) scale3d(.5,.5,.5) ; */
  transform: scale3d(.5,.5,.5) ;
  animation: samllRun 5s infinite;

}

@keyframes samllRun{
  0%{
    transform: scale3d(.5,.5,.5) rotateX(-45deg) rotateY(315deg);
  }

  100%{
    transform: scale3d(.5,.5,.5) rotateX(-45deg) rotateY(-45deg);
  }
}

@keyframes bigRun{
  0%{
    transform: rotateX(-45deg) rotateY(-45deg);
  }

  100%{
    transform: rotateX(-45deg) rotateY(315deg);
  }
}

</style>
</head>
<body>

<div class="bigbox">

  <ul class="box big">
    <li class="left">left</li>
    <li class="right">right</li>
    <li class="top">top</li>
    <li class="bottom">bottom</li>
    <li class="front">front</li>
    <li class="back">back</li>
  </ul>

  <ul class="box small">
    <li class="left">left</li>
    <li class="right">right</li>
    <li class="top">top</li>
    <li class="bottom">bottom</li>
    <li class="front">front</li>
    <li class="back">back</li>
  </ul>
  
</div>

</body>
</html>